/*
 * @Author: Wilbur
 * @Date: 2019-04-03 16:06:54
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-04-04 09:29:06
 */

<template>
    <div class="container search-log-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20"
            >
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small"
                >
                    <el-col
                        class="filter-item"
                        :md="{ span: 24 }"
                        :sm="{ span: 24 }"
                    >
                        <el-form-item label="按月搜索">
                            <el-date-picker
                                v-model="filterData.mouth"
                                type="month"
                                :clearable="false"
                                @change="getTableData()"
                                placeholder="选择月"/>
                        </el-form-item>
                        <el-button
                            size="small"
                            type="primary"
                            style="float: right;"
                            :disabled="filterData.mouth ? false : true"
                            @click="fnGetRankData"
                        >查看当月搜索排行榜</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="keyword"
                        show-overflow-tooltip
                        label="搜索内容">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                @click="fnGoFront(scope.row.keyword)">{{ scope.row.keyword }}</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column
                        header-align="left"
                        label="搜索人地区"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.province_name }}{{ scope.row.city_name }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="create_time"
                        label="搜索时间">
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
        <el-dialog
            :title="fnInitMonth()"
            custom-class="rank-dialog"
            lock-scroll
            width="900px"
            top="8vh"
            :visible.sync="dialogTableVisible">
            <el-table
                :data="rankList"
                height="500"
                class="rank-table">
                <el-table-column
                    fixed="left"
                    label="排名"
                    property="rank"
                    header-align="center"
                    align="center"/>
                <el-table-column
                    fixed
                    header-align="center"
                    align="center"
                    property="keyword"
                    label="搜索内容"/>
                <el-table-column
                    property="search_count"
                    header-align="center"
                    align="center"
                    label="搜索次数"/>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            rankList: [],
            dialogTableVisible: false,
            authResult: {},
            tableData: [],
            filterData: {
                mouth: '',
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            currTime: 0
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '前台搜索记录'
            }
        ]);

        this.filterData.mouth = new Date();
        this.getTableData(this.$route.query.page);
    },
    filters: {
        emptyFilter(val){
            if (!val) {
                return '--';
            }
            return val;
        }
    },
    methods: {
        fnGoFront(keyword) {
            window.open(`${this.$shopBaseUrl}/resource?keyword=${keyword}`);
            // if(window.location.host == 'phaadmin.wxhand.com') {
            //     window.open('http://cms.zsdx.cn/resource?keyword=' + keyword);
            // }else{
            //     window.open('http://gt.wxhand.com/resource?keyword=' + keyword);
            // }
        },
        fnInitMonth() {
            let date = this.filterData.mouth;

            return new Date(date).getFullYear() + '.' + (parseInt(new Date(date).getMonth()) + 1) + '搜索排行榜';
        },
        /**
       * 获取表格数据
       */
        getTableData(page) {
            let time = new Date().getTime();

            this.currTime = time;

            // this.$router.replace({
            //     query: {
            //         page: page || this.page.now_page
            //     }
            // });
            this.$post('/wei4/search%5Cget_hire_resource_log_list', {
                month_time: this.filterData.mouth ? this.filterData.mouth.getTime() / 1000 : '',
                page_id: page || this.page.now_page
            }, resp => {
                if(this.currTime != time){
                    return ;
                }
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if (this.page.now_page > resp.data.page.total_page && this.page.now_page !== 1) {
                        this.getTableData(resp.data.page.total_page);
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnGetRankData() {
            this.dialogTableVisible = true;
            this.$post('/wei4/search%5Cget_hire_resource_statistic_list', {
                month_time: this.filterData.mouth ? this.filterData.mouth.getTime() / 1000 : '',
            }, resp => {
                if (resp.code == 1) {
                    this.rankList = resp.data.list;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        /**
       * 跳转页面
       */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
       * 列表渲染辅助函数：列表项为空处理
       */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
      padding: 0;
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }
</style>
<style lang="less">
.search-log-container{
    .search-wrapper{
        .el-form-item{
            display: inline-block;
            margin-bottom: 0;
        }
    }
}
.rank-dialog{
    .rank-table{
    }
}
</style>
